<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑活动内容</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
</head>
<style>
    .layui-input-block{
        margin-left: 120px !important;
    }
    .layui-form-label{
        width: auto;
    }
</style>
<body style="height: 750px;background-color: white">
<div style="width:80%;height:100%;margin:15px auto;">
    <div style="width:80%;margin:15px auto;text-align: center" class="layui-btn-group" id="btngroup">
        <button type="button" id="btnchina" class="layui-btn layui-btn-primary" onclick="clickbtn(0)">中文</button>
        <button type="button" id="btnenglish" class="layui-btn layui-btn-primary" onclick="clickbtn(1)">英语</button>
        <!--    泰语-->
        <button type="button" id="btnlaowo" class="layui-btn" onclick="clickbtn(2)">泰语</button>
        <button type="button" id="btnjianpuzhai" class="layui-btn layui-btn-primary" onclick="clickbtn(3)">柬埔寨</button>
    </div>
    <form class="layui-form" action="">
        <div class="layui-form-item" id="title_div" style="display: none">
            <label class="layui-form-label" >活动标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" id="title" required  lay-verify="required" placeholder="请输入活动标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" id="title_en_div" style="display: none">
            <label class="layui-form-label" >英语活动标题</label>
            <div class="layui-input-block">
                <input type="text" name="title_en" id="title_en"  placeholder="请输入英语标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" id="title_tai_div">
            <label class="layui-form-label" >泰语活动标题</label>
            <div class="layui-input-block">
                <input type="text" name="title_tai" id="title_tai"  placeholder="请输入泰语标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" id="title_kh_div" style="display: none">
            <label class="layui-form-label" >柬埔寨标题</label>
            <div class="layui-input-block">
                <input type="text" name="title_kh" id="title_kh"  placeholder="请输入柬埔寨标题" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" id="peisongDiv">
            <label class="layui-form-label" >活动时间</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="date1" name="startTime" style="width: 200px;display: inline-block;text-align: center;font-size: 20px" autocomplete="off"> 至
                <input type="text" class="layui-input" id="date2" name="endTime" style="width: 200px;display: inline-block;text-align: center;font-size: 20px" autocomplete="off">
            </div>
        </div>

        <div class="layui-form-item" id="detail_div" style="display: none">
            <label class="layui-form-label" >活动详情:</label>
            <div class="layui-input-block">
                <script id="editor" type="text/plain" style="height:500px;margin: auto"></script>
            </div>
        </div>
        <div class="layui-form-item" id="detail_english_div" style="display: none ">
            <label class="layui-form-label">活动详情:</label>
            <div class="layui-input-block">
                <script id="editor_english" type="text/plain" name="detail_en" style="height:500px;margin: auto"></script>
            </div>
        </div>
        <div class="layui-form-item" id="detail_tai_div">
            <label class="layui-form-label">活动详情:</label>
            <div class="layui-input-block">
                <script id="editor_tai" type="text/plain" name="detail_tai" style="height:500px;margin: auto"></script>
            </div>
        </div>
        <div class="layui-form-item" id="detail_kh_div" style="display: none">
            <label class="layui-form-label">活动详情:</label>
            <div class="layui-input-block">
                <script id="editor_kh" type="text/plain" name="detail_kh" style="height:500px;margin: auto"></script>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否显示：</label>
            <div class="layui-input-block">
                <input type="radio" id="xianshi" name="xianshi" value="1" title="显示" checked="">
                <div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i>显示
                </div>
                <input type="radio" id="yincang" name="xianshi" value="0" title="隐藏">
                <div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>隐藏</div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" >状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" id="qiyong" title="启用" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed" ><i class="layui-anim layui-icon"></i>启用</div>
                <input type="radio" name="status" value="0" id="jinyong" title="禁用"><div class="layui-unselect layui-form-radio" ><i class="layui-anim layui-icon"></i>禁用</div>
            </div>
        </div>

        <div class="layui-form-item" style="margin-top: 20px;margin: auto">
            <div class="layui-input-block">
                <button class="layui-btn" id="addWuye" lay-submit lay-filter="addWuye" >修改</button>
            </div>
        </div>
    </form>
</div>
</body>
<script src="/js/layui/layui.js"></script>
<script src="/js/layui/layui.all.js"></script>
<script src="/admin/js/token.js"></script>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
<!-- 配置文件 -->
<script type="text/javascript" src="/admin/ueditor/1.4.3/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/admin/ueditor/1.4.3/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script>
    var $ = layui.$;
    var upload = layui.upload;
    var layedit = layui.layedit;
    var form    = layui.form;
    var laydate=layui.laydate;
    var ue = UE.getEditor('editor');
    var ue_english = UE.getEditor('editor_english');
    var ue_tai = UE.getEditor('editor_tai');
    var ue_kh = UE.getEditor('editor_kh');
    var id;

    //日期选择器
    laydate.render({
        elem: '#date1'
        ,type: 'date' //默认，可不填
    });
    //日期选择器
    laydate.render({
        elem: '#date2'
        ,type: 'date' //默认，可不填
    });

    //url 传参
    function GetQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var a = decodeURI(window.location.search);
        var r = a.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
        if(r!=null)return  unescape(r[2]); return null;
    }

    window.onload = function(){
        layer.load(2);
        id=GetQueryString("id");
        $.ajax({
            url:'/activities/getActivitiesById?id='+id,
            async:false,
            type:'get',
            success: function (res) {
                if(res.code==200){
                    $("input[name='title']").val(res.data.title);
                    $("input[name='title_en']").val(res.data.title_en);
                    $("input[name='title_tai']").val(res.data.title_tai);
                    $("input[name='title_kh']").val(res.data.title_kh);
                    if(res.data.detail!="" && res.data.detail!==null){
                        ue.ready(function(){
                            //设置编辑器的内容
                            ue.setContent(res.data.detail);
                        });
                    }
                    if(res.data.detail_en!=""&&res.data.detail_en!=null){
                        ue_english.ready(function(){
                            //设置编辑器的内容
                            ue_english.setContent(res.data.detail_en);
                        });
                    }
                    if (res.data.detail_tai!=""&&res.data.detail_tai!=null){
                        ue_tai.ready(function(){
                            //设置编辑器的内容
                            ue_tai.setContent(res.data.detail_tai);
                        });
                    }
                    if (res.data.detail_kh!=""&&res.data.detail_kh!=null){
                        ue_kh.ready(function(){
                            //设置编辑器的内容
                            ue_kh.setContent(res.data.detail_kh);
                        });
                    }

                    $("#date1").val(res.data.date1);
                    $("#date2").val(res.data.date2);
                    if(res.data.status==1){
                        $("#qiyong").prop("checked",true);
                    }else{
                        $("#jinyong").prop("checked",true);
                    }
                    if(res.data.xianshi==1){
                        $("#xianshi").prop("checked",true);
                    }else{
                        $("#yincang").prop("checked",true);
                    }
                    form.render();
                }
                layer.closeAll();
            }
        });

    };

    //修改操作
    form.on('submit(addWuye)',function(data){
        var detail = ue.getContent();
        var detail_en = ue_english.getContent();
        var detail_tai = ue_tai.getContent();
        var detail_kh = ue_kh.getContent();
        var title = $("#title").val();
        var title_en = $("#title_en").val();
        var title_tai = $("#title_tai").val();
        var title_kh = $("#title_kh").val();
        var startTime = $("#date1").val();
        var endTime = $("#date2").val();
        var status = $("input[name='status']:checked").val();
        var xianshi = $("input[name='xianshi']:checked").val();
        if($("#date1").val()=='' || $("#date2").val()=='') {
            layer.msg("请填活动时间");
        }else if(detail==null || detail==""){
            layer.msg('请填写活动详情！');
        }else if (title=='' || title==null){
            layer.msg("请填写标题");
        }else{
            data.field.id=id;
            data.field.title= title;
            data.field.title_en=title_en;
            data.field.title_tai=title_tai;
            data.field.title_kh=title_kh;
            data.field.startTime=startTime;
            data.field.endTime=endTime;
            data.field.status=status;
            data.field.xianshi=xianshi;
            data.field.detail_en=detail_en;
            data.field.detail_tai=detail_tai;
            data.field.detail_kh=detail_kh;
            data.field.detail=detail;
            $.ajax({
                url:"/activities/updateActivities"
                ,type:"post"
                ,contentType: 'application/json'
                ,data:JSON.stringify(data.field)
                ,success:function (data) {
                    if(data.code==200){
                        layer.close(layer.index);
                        layer.msg('修改成功');
                        setTimeout(function(){
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);//关闭弹出层
                            parent.location.reload();//重新加载父页面表格
                        }, 2000);
                    }else {
                        layer.msg(data.msg,{icon:2});
                    }
                }
                ,error:function () {
                    console.log("ajax error");
                }
            });
        }
        return false;
    });

    function clickbtn(index) {
        var btns=$("#btngroup").find("button");
        if (index == 0) {
            $("#title_div").css("display", "block");
            $("#title_en_div").css("display", "none");
            $("#title_tai_div").css("display", "none");
            $("#title_kh_div").css("display", "none");
            $("#detail_div").css("display", "block");
            $("#detail_english_div").css("display", "none");
            $("#detail_tai_div").css("display", "none");
            $("#detail_kh_div").css("display", "none");
        } else if (index == 1) {
            $("#title_div").css("display", "none");
            $("#title_en_div").css("display", "block");
            $("#title_tai_div").css("display", "none");
            $("#title_kh_div").css("display", "none");
            $("#detail_div").css("display", "none");
            $("#detail_english_div").css("display", "block");
            $("#detail_tai_div").css("display", "none");
            $("#detail_kh_div").css("display", "none");
        } else if (index == 2) {
            $("#title_div").css("display", "none");
            $("#title_en_div").css("display", "none");
            $("#title_tai_div").css("display", "block");
            $("#title_kh_div").css("display", "none");
            $("#detail_div").css("display", "none");
            $("#detail_english_div").css("display", "none");
            $("#detail_tai_div").css("display", "block");
            $("#detail_kh_div").css("display", "none");
        }else if (index = 3){
            $("#title_div").css("display", "none");
            $("#title_en_div").css("display", "none");
            $("#title_tai_div").css("display", "none");
            $("#title_kh_div").css("display", "block");
            $("#detail_div").css("display", "none");
            $("#detail_english_div").css("display", "none");
            $("#detail_tai_div").css("display", "none");
            $("#detail_kh_div").css("display", "block");
        }
        for(let i=0;i<btns.length;i++){
            if(i==index){
                btns[i].setAttribute("class","layui-btn");
                continue;
            }
            btns[i].setAttribute("class","layui-btn layui-btn-primary");
        }
    }
</script>
</html>